<template>
<div class="control-section">
    <div class="split-button-section">
        <div id="split-button-control">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-lg-3 col-md-3">
                    <ejs-splitbutton :items="items" iconCss="e-btn-icons e-paste"></ejs-splitbutton>
                </div>
                <div class="col-xs-12 col-sm-6 col-lg-3 col-md-3">
                    <ejs-splitbutton :items="items" content="Paste"></ejs-splitbutton>
                </div>
                <div class="col-xs-12 col-sm-6 col-lg-3 col-md-3">
                    <ejs-splitbutton :items="items" content="Paste" iconCss="e-btn-icons e-paste"></ejs-splitbutton>
                </div>
                <div class="col-xs-12 col-sm-6 col-lg-3 col-md-3">
                    <ejs-splitbutton :items="items" content="Paste" iconCss="e-btn-icons e-paste" :beforeItemRender="beforeItemRender"></ejs-splitbutton>
                </div>
            </div>
        </div>
    </div>
    <div id="action-description">
    <p>This sample demonstrates the default functionalities of the SplitButton. By clicking primary button default action will
        be triggered and clicking secondary button will display popup with list of action items.
    </p>
</div>
<div id="description">
    <p>
        The SplitButton component has primary and secondary buttons. Primary button is used to select default action and secondary
        button is used to toggle contextual overlays for displaying list of action items. It can contain both text and images.
    </p>
    <p>
        In this sample, SplitButton contains icon, content and list of action items, and can be added using
        <code><a target="_blank" class="code" href="https://ej2.syncfusion.com/vue/documentation/api/split-button/#iconcss">iconCss,
        </a></code>
        <code><a target="_blank" class="code" href="https://ej2.syncfusion.com/vue/documentation/api/split-button/#content">content
        </a></code>and
        <code><a target="_blank" class="code" href="https://ej2.syncfusion.com/vue/documentation/api/split-button/#items">items
        </a></code>property.
    </p>
    <p>
        More information about SplitButton can be found in this
        <a target="_blank" href="https://ej2.syncfusion.com/vue/documentation/split-button/getting-started">
            documentation section</a>.
    </p>
</div>
</div>
</template>

<style>
/* custom code start */
#split-button-control {
  width: 100%;
  margin: 11% 0;
  text-align: center;
}

.split-button-section {
  width: 80%;
  margin: auto;
}

#split-button-control .col-sm-6 {
  margin: 25px 0;
}

/* custom code end */

/* SplitButton sample icons */
@font-face {
font-family: 'e-btn-icons';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,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IABFAEoAMgAgAFMAcABsAGkAdAAgAGIAdQB0AHQAbwBuACAAcABhAHMAdABlACAAaQBjAG8AbgBzACAAZgBvAHIAIAB0AGgAZQBtAGUAcwBSAGUAZwB1AGwAYQByAEUASgAyACAAUwBwAGwAaQB0ACAAYgB1AHQAdABvAG4AIABwAGEAcwB0AGUAIABpAGMAbwBuAHMAIABmAG8AcgAgAHQAaABlAG0AZQBzAEUASgAyACAAUwBwAGwAaQB0ACAAYgB1AHQAdABvAG4AIABwAGEAcwB0AGUAIABpAGMAbwBuAHMAIABmAG8AcgAgAHQAaABlAG0AZQBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABFAEoAMgAgAFMAcABsAGkAdAAgAGIAdQB0AHQAbwBuACAAcABhAHMAdABlACAAaQBjAG8AbgBzACAAZgBvAHIAIAB0AGgAZQBtAGUAcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAA5QYXN0ZV9NYXRlcmlhbBVQYXN0ZVNwZWNpYWxfTWF0ZXJpYWwWUGFzdGVGb3JtdWxhX0Jvb3RzdHJhcBhQYXN0ZUh5cGVybGlua19Cb290c3RyYXAWUGFzdGVTcGVjaWFsX0Jvb3RzdHJhcBVQYXN0ZUZvcm11bGFfTWF0ZXJpYWwPUGFzdGVfQm9vdHN0cmFwF1Bhc3RlSHlwZXJsaW5rX01hdGVyaWFsE1Bhc3RlTWFpbl9Cb290c3RyYXASUGFzdGVNYWluX01hdGVyaWFsBVBhc3RlDlBhc3RlQXNGb3JtdWxhDFBhc3RlU3BlY2lhbBBQYXN0ZUFzSHlwZXJsaW5rAAAA) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-btn-icons {
  font-family: "e-btn-icons";
  font-weight: normal;
}

.e-paste::before {
  content: "\e700";
}

.e-paste-special::before {
  content: "\e701";
}

.e-paste-formula::before {
  content: "\e705";
}

.e-paste-hyperlink::before {
  content: "\e707";
}

.material .e-paste::before,
.bootstrap .e-paste::before {
  content: "\e706";
}

.material .e-paste-special::before,
.bootstrap .e-paste-special::before {
  content: "\e704";
}

.material .e-paste-formula::before,
.bootstrap .e-paste-formula::before {
  content: "\e702";
}

.material .e-paste-hyperlink::before,
.bootstrap .e-paste-hyperlink::before {
  content: "\e703";
}

.bootstrap4 .e-paste::before {
  content: '\e739';
}

.bootstrap4 .e-paste-special::before {
  content: '\e813';
}

.bootstrap4 .e-paste-formula::before {
  content: '\e812';
}
    
.bootstrap4 .e-paste-hyperlink::before {
  content: '\e814';
}
</style>
<script>
import Vue from "vue";
import { SplitButtonPlugin } from "@syncfusion/ej2-vue-splitbuttons";

Vue.use(SplitButtonPlugin);

export default Vue.extend({
  data: function() {
    return {
      items: [
        {
          text: "Paste",
          iconCss: "e-btn-icons e-paste"
        },
        {
          text: "Paste Special",
          iconCss: "e-btn-icons e-paste-special"
        },
        {
          text: "Paste as Formula",
          iconCss: "e-btn-icons e-paste-formula"
        },
        {
          text: "Paste as Hyperlink",
          iconCss: "e-btn-icons e-paste-hyperlink"
        }
      ]
    };
  },
  methods: {
    beforeItemRender: function(args) {
      if (args.item.text !== "Paste") {
        args.element.classList.add("e-disabled");
      }
    }
  }
});
</script>